<template>
  <div class="">
    <div class="mod22 flex-row justify-between">
      <span class="info17">获奖列表</span>
      <div class="wrap6 flex-col"></div>
    </div>
    <div class="mod23 flex-row">
      <span>作品名称</span>
      <span>获奖级别</span>
      <span>创作者</span>
    </div>
    <div class="table-container">
      <div :class="{marquee_top:animate}">
        <div class="flex" v-for="item,index in marqueeList" :key="index"
          :style="{display: 'flex', 'justify-content': 'space-between',  'align-items': 'center'}"
          >
          <span class="txt21">{{item.name}}</span>
          <span class="info18">{{item.level}}</span>
          <span class="txt22">{{item.creater}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import dataFrom from '@/assets/json/effectEevaluation.json'
export default {
  data(){
    return {
      dataFrom: dataFrom,
      marqueeList: [],
      animate: false,
      timer: null
    }
  },
  created: function() {
    let list = []
    dataFrom.listOfAwards.forEach((item, i) => {
      list.push(item)
    });
    dataFrom.listOfAwards.forEach((item, i) => {
      list.push(item)
    });
    this.marqueeList = list
    var timer = setInterval(this.showMarquee, 2000);
  },
  methods: {
    showMarquee: function() {
      this.animate = true;
      setTimeout(() => {
        this.marqueeList.push(this.marqueeList[0]);
        this.marqueeList.shift(); // 删除数组中的第一个元素
        this.animate = false;
      }, 500);
    }
  },
  destroyed () {
    clearInterval(this.timer)
  }
}
</script>
<style scoped>
.table-container{
  overflow: hidden;
  height: 216px;
}
.marquee_top {
  transition: all 0.5s ease-out;
  margin-top: -36px;
}
</style>
